<div class="x-blog" ng-init="vm.init();refresh(vm.callback);">
  <div class="x-blog-viewer" ng-class="{'container-fluid': vm.fullScreen, 'container': !vm.fullScreen}"
      ng-show="vm.code != ''">
    <section class="x-markdown">
      <h1>{{vm.title}}</h1>
      <hr>
      <p markdown-to-html="vm.code"></p>
    </section>
    <aside class="x-header-list" ng-if="vm.headers.length > 0" ng-class="{'x-hover': vm.hover}"
        ng-show="vm.showHeaders" ng-mouseleave="vm.hover = false" ng-mouseover="vm.hover = true">
      <ul class="x-timeline" ng-init="vm.selected = vm.headers[0].id">
        <li></li>
        <li ng-repeat="header in vm.headers" class="{{'x-' + header.level}}"
            ng-class="{'x-active': vm.selected == header.id}">
          <i class="x-ball"></i>
          <div class="x-timeline-item">
            <div class="x-timeline-header"><a href="javascript:void(0)" ng-disabled="vm.selected == header.id"
                ng-click="vm.scrollTo(header.id, $index)">{{header.text}}</a></div>
          </div>
        </li>
        <li></li>
      </ul>
    </aside>
    <aside class="x-blog-sidebar">
      <div class="btn-group-vertical">
        <button type="button" class="btn btn-default btn-circle btn-lg" title="目录" ng-show="vm.headers.length > 0"
            ng-click="vm.showHeaders = !vm.showHeaders">
          <i class="fa fa-list"></i></button>
        <button type="button" class="btn btn-default btn-circle btn-lg" title="回到顶部" ng-click="vm.gotoTop()">
          <i class="fa fa-arrow-up"></i></button>
        <button type="button" class="btn btn-default btn-circle btn-lg" title="全屏"
            ng-click="vm.fullScreen = !vm.fullScreen;vm.showHeaders = !vm.fullScreen">
          <i class="fa fa-arrows-alt"></i></button>
      </div>
    </aside>
  </div>
</div>
